<template>
  <div class="header-module">
    <div class="logo">
      <img src="@/assets/bilibili.png">
    </div>
    <div class="fun-module">
      <van-icon name="search" />
      <span class="login-btn">登录</span>
      <van-button type="primary" size="small">下载 APP</van-button>
    </div>
  </div>
</template>

<script></script>

<style lang="less" scoped>
.header-module {
  display: flex;
  width: 100%;
  height: 50px;
  .logo {
    width: 30%;
    img {
      height: 100%;
    }
  }
  .fun-module {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 70%;
    .van-icon-search {
      font-size: 24px;
      color: #bfbfbf;
      margin-right: 0.6em;
    }
    .login-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 0.6em;
      background-color: #e3e3e3;
      font-size: 0.7em;
      line-height: 30px;
      text-align: center;
      color: #fb7299;
      font-weight: 600;
    }
    .van-button--primary {
      height: 30px;
      padding: 0 0.9em;
      margin: 0 0.6em;
      border-radius: 4px;
      border: none;
      background-color: #fb7299;
      font-size: 13px;
    }
  }
}
</style>
